@charset "utf-8";
@import url(../styles/nav.less);
@import url(../styles/footer.less);
@import url(../styles/common.less);
html,
body {
  width: 100%;
  height: 100%;
}


.product {
  position: relative;
  z-index: 4;
  background: #fff;
  border-top: 1px solid #e0e0e0;
  border-bottom: 1px solid #e0e0e0;
  .nav-bar {
    position: relative;
    height: 63px;
    width: 100%;
    margin-top: 0;
    color: #616161;
    .container {
      h2 {
        margin: 0;
        font-size: 18px;
        font-weight: 400;
        line-height: 60px;
        color: #424242;
        float: left;
      }
      .con {
        .right {
          float: right;
          margin-top: 17px;
          a {
            color: #616161;
          }
        }
      }
    }
  }
}
.details {
  .details-pag {
    .details-info {
      .details-box {
        justify-content: center;
        padding-top: 32px;
        padding-bottom: 12px;
        display: flex;
        .img-left {
          width: 606px;
          position: relative;
          height: 740px;
          .img-box {
            position: absolute;
            top: 0;

            .swiper {
              width: 560px;
              margin: 0 auto;
              position: relative;
              overflow: hidden;

              padding: 0;
              z-index: 1;
              .swiper-wrapper {
                height: 566px;
                width: 100%;
                display: flex;
                box-sizing: content-box;
                .swiper-slider {
                  width: 560px;
                  opacity: 1;
                  background: #fff;
                  flex-shrink: 0;
                  position: absolute;
                  top: 0;
                  left: 0;

                  img {
                    width: 560px;
                    height: 560px;
                  }
                }
              }
              .swiper-paa {
                position: absolute;
                bottom: 20px;
                left: 0;
                width: 100%;
                z-index: 1;
                text-align: center;
                span {
                  margin: 0 4px;
                  background: #ccc;
                  width: 50px;
                  border-radius: 0;
                  border: 0;
                  height: 3px;
                  cursor: pointer;
                  display: inline-block;
                  overflow: hidden;
                  opacity: 0.8;
                }
              }
              .swiper-next {
                background: url(../img/icon-slides.png) no-repeat -125px 50%;
                right: 0;
                left: auto;
                position: absolute;
                top: 50%;
                width: 41px;
                height: 69px;
                margin-top: -35px;
                z-index: 10;
                cursor: pointer;
                outline: none;
              }
              .swiper-prev {
                background: url(../img/icon-slides1.png) no-repeat -84px 50%;
                left: 0;
                position: absolute;
                top: 50%;
                width: 41px;
                height: 69px;
                margin-top: -35px;
                z-index: 10;
                cursor: pointer;
                outline: none;
                right: auto;
              }
            }
          }
        }
        .details-con {
          -webkit-box-flex: 1;

          flex: 1;
          margin-left: 20px;
          h2 {
            margin: 0;
            padding: 0;
            font-size: 24px;
            font-weight: 400;
            color: #212121;
            display: block;
          }
          .p1 {
            color: #b0b0b0;
            margin: 0;
            padding: 0;
            padding-top: 8px;
            line-height: 1.5;
          }
          .xiaomi {
            color: #ff6700;
            margin-bottom: 0;
          }
          .shopp-price {
            display: block;
            font-size: 18px;
            line-height: 1;
            color: #ff6700;
            padding: 12px 0 10px;
            span {
              display: inline-block;
              font-size: 18px;
              color: #ff6700;
              line-height: 1;
            }
          }
          .line {
            margin-top: 12px;
            border-bottom: 1px solid #e0e0e0;
          }
          .address {
            margin: 20px 0;
            .address-box {
              padding: 30px 50px;
              position: relative;
              background: #fafafa;
              border: 1px solid #e0e0e0;
              .tb {
                position: absolute;
                left: 20px;
                top: 26px;
                font-size: 20px;
                color: #999;
              }
              .address-info {
                display: inline-block;
                span {
                  display: inline;
                  margin-right: 14px;
                }
              }
              a {
                display: inline-block;
                color: #ff6700;
                margin: 0;
              }
              .info {
                color: #b0b0b0;
                .desc-info {
                  span {
                    display: inline;
                    color: #ff6700;
                    margin: 0;
                  }
                }
              }
            }
          }
          .buy {
            margin: 20px 0;
            .buy-box {
              margin-bottom: 30px;
              position: relative;
              .title {
                font-size: 18px;
              }
              ul {
                display: block;
                margin: 0;
                padding: 0;

                li {
                  margin-right: 12px;
                  margin-top: 10px;
                  line-height: 42px;
                  height: 42px;
                  position: relative;
                  border: 1px solid #e0e0e0;
                  list-style: none;
                  cursor: pointer;

                  float: left;
                  width: 292px;
                  font-size: 16px;
                  text-align: center;
                  z-index: 3;
                  border-color: #ff6700;
                  a {
                    color: #ff6700;
                    display: block;
                  }
                }
              }
            }
          }
          .selected {
            background: #f9f9fa;
            padding: 30px;
            margin-bottom: 30px;
            ul {
              display: block;
              li {
                line-height: 30px;
                color: #616161;
                margin-top: 0;
                float: left;
              }
              span {
                float: right;
                list-style: none;
                line-height: 30px;
                color: #616161;
              }
            }
            .total-price {
              color: #ff6700;
              font-size: 24px;
              padding-top: 40px;
            }
          }
          .btn-box {
            margin: 10px 0 20px 0;
            .sale-btn {
              display: inline-block;
              margin-right: 10px;
              a {
                width: 298px;
                height: 52px;
                line-height: 52px;
                font-size: 16px;
                background: #ff6700;
                border-color: #ff6700;
                color: #fff;
                display: inline-block;
                cursor: pointer;
                text-align: center;
                border: 1px solid #b0b0b0;
              }
            }
            .favorite-btn {
              display: inline-block;
              vertical-align: top;
              a {
                display: block;
                width: 140px;
                height: 52px;
                line-height: 52px;
                padding: 0;
                margin: 0;
                border: 1px solid #b0b0b0;
                text-align: center;
                cursor: pointer;
                background: #b0b0b0;
                font-size: 16px;
                position: relative;
                color: #fff;
                .icon-hear {
                  font-size: 22px;
                  line-height: 23px;
                  vertical-align: -4px;
                  margin-right: 5px;
                  text-align: center;
                  cursor: pointer;
                }
                .red {
                  color: #e53935;
                  display: none;
                  position: relative;
                  font-size: 22px;
                  line-height: 23px;
                  vertical-align: -4px;
                  margin-right: 5px;
                  .redsd {
                    position: absolute;
                    top: 0;
                    left: 0;
                  }
                }
              }
            }
          }
          .after-info {
            span {
              display: inline-block;
              color: #333;
              a {
                display: inline-block;
                margin-right: 15px;
                line-height: 30px;
                margin-bottom: 10px;
                cursor: default;
                white-space: nowrap;
                color: #b0b0b0;
                i {
                  font-size: 20px;
                  display: inline-block;
                  font-style: normal;
                  vertical-align: middle;
                  line-height: 30px;
                  cursor: default;
                  white-space: nowrap;
                  color: #b0b0b0;
                }
                em {
                  font-style: normal;
                  display: inline-block;
                  margin-left: 2px;
                  vertical-align: middle;
                  line-height: 30px;
                  cursor: default;
                  white-space: nowrap;
                  color: #b0b0b0;
                }
              }
            }
          }
        }
      }
    }
    .product-detail {
      padding-bottom: 50px;
      background: #f5f5f5;
      .product-box {
        .product-item {
          .section {
            .section-plain {
              .img-box {
                position: relative;
                width: 100%;
                overflow: hidden;
                margin: 0 auto;
               
                img {
                  position: absolute;
                  left: 18%;
                  top: 0;

                  height: 100%;
                }
              }
              .section-title {
                height: 100px;
                h3 {
                  font-size: 22px;
                  font-weight: 400;
                  margin-top: 0;
                  margin-bottom: 0;
                  padding: 1em 0;
                  display: block;
                  line-height: 80px;
                }
              }
            }
          }
        }
      }
    }
  }
}
